<template>
  <div class="updateHistory">
    <el-row :style="{paddingBottom: 0}">
      <el-col>
        <dynForm :info-form="infoForm" :search-tags="searchTags" >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch">
            {{ $t("search") }}
          </el-button>
        </dynForm>
      </el-col>
    </el-row>
    <el-card class="box-card" shadow="never">
      <el-row>
        <el-col :span="24">
          <dynTable
            ref="dynTable"
            :loading="tableLoading"
            :table-data="tableData"
            :table-columns="tableColumns"
          />
          <pagination
            :total="total"
            :page.sync="listQuery.page"
            :size.sync="listQuery.size"
            @pagination="getList"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import updateHistoryApi from '@/api/testprogram/updateHistory'
export default {
  name: 'UpdateHistory',
  components: {},
  mixins: [mySetting, networkTips],
  props: {},
  data() {
    return {
      infoForm: {},
      searchTags: [
        {
          label: this.$t('testMachineProgram'),
          prop: 'document',
          tag: 'DynInput'
        },
        {
          label: this.$t('folder'),
          prop: 'documentFolder',
          tag: 'DynInput'
        },
        {
          label: this.$t('version'),
          prop: 'documentVer',
          tag: 'DynInput'
        },
        {
          label: this.$t('updateLaborNumber'),
          prop: 'userId',
          tag: 'DynInput'
        },
        { label: this.$t('timeInterval'), prop: '', tag: 'Dyndaterange', event: (value) => {
          this.infoForm.startTime = Array.isArray(value) ? value[0] : null
          this.infoForm.endTime = Array.isArray(value) ? value[1] : null
        } }
      ],
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'document', label: this.$t('testMachineProgram') },
        { prop: 'documentFolder', label: this.$t('folder') },
        { prop: 'documentVer', label: this.$t('version') },
        { prop: 'preDocumentVer', label: this.$t('preProgramVersion') },
        { prop: 'backupPath', label: this.$t('testProgramBackupPath') },
        { prop: 'remark', label: this.$t('updateLog') },
        { prop: 'systemTime', label: this.$t('testingTime') },
        { prop: 'updadeID', label: this.$t('updateLaborNumber') }
      ],
      tableLoading: true
    }
  },
  computed: {},
  watch: {},
  created() {
    this.initList()
  },
  mounted() {},
  methods: {
    // 初始化列表
    async initList() {
      const res = await updateHistoryApi.getList(this.$clearNull({ ...this.listQuery, ...this.infoForm }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    // 搜索
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    getList(val) {
      this.listQuery = val
      this.initList()
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
</style>
